<template>
  <el-card shadow="hover" class="m-l-10-p-20">
    <template v-slot:header>
      <div class="clearfix">
        <span>我的待办提醒</span>
      </div>
    </template>
    <div class="text item text-center">
      <el-card shadow="never">
        <el-calendar v-model="current_time">
          <template #date-cell="{ data }">
            <div class="calendar-day">
              {{ data.day.split('-').slice(1).join('-') }}
            </div>
            <div class="calendar-data" v-if="formatSchedule(data.day)">
              <el-link @click="router.push({ name: 'module_business_client_trace_list', query: { current_date: data.day } })">
                <el-tag v-if="data.isSelected" type="primary" effect="dark">
                  <el-icon><Phone /></el-icon>
                  <span>跟踪提醒 x {{ formatSchedule(data.day) }}</span>
                </el-tag>
                <el-tag v-else type="info" effect="dark">
                  <el-icon><Phone /></el-icon>
                  <span>跟踪提醒 x {{ formatSchedule(data.day) }}</span>
                </el-tag>
              </el-link>
            </div>
          </template>
        </el-calendar>
      </el-card>
    </div>
  </el-card>
</template>

<script setup name="index-schedule">
  import { useBase } from "@/hooks/base/useBase";

  const { router, i18n } = useBase()

  const current_time = ref(new Date())
  const schedule = ref({})

  const getScheduleData = () => {
    $http({
      url: $http.adornUrl('/index/schedule'),
      method: 'post',
      params: $http.adornParams({}),
    }).then(({ data }) => {
      if (data && data.status === 200) {
        schedule.value = data.data
      }
    })
  }

  const formatSchedule = (date) => {
    return schedule.value[date];
  }

  onMounted(() => {
    getScheduleData()
  })

</script>

<style scoped lang="scss">
  .calendar-day {
    text-align: left;
  }
  .calendar-data {
    margin-top: 10px;

    span {
      margin-left: 5px;
    }
  }
</style>
